<template>
  <a-drawer
    v-model:open="store.openDrawer"
    class="drawer"
    width="800px"
    :title="store.title"
    placement="right"
    :closable="false"
  >
    <template #extra>
      <a-icon type="icon-CloseButton" class="icon" @click="handleClose"></a-icon>
    </template>
    <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
      <!-- ID -->
      <a-form-item label="ID" v-if="!store.editFlag && !store.addFlag">
        <a-input
          v-model:value="formData.positionId"
          placeholder="请输入职位 ID"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 职位名称 -->
      <a-form-item label="职位名称">
        <a-input
          v-model:value="formData.title"
          placeholder="请输入职位名称"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 薪资 -->
      <a-form-item label="薪资">
        <a-input
          v-model:value="formData.salary"
          placeholder="请输入薪资"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 工作地 -->
      <a-form-item label="工作地">
        <a-input
          v-model:value="formData.location"
          placeholder="请输入工作地"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 应往届 -->
      <a-form-item label="应往届">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.gen"
          placeholder="请选择应往届"
          :disabled="!store.editFlag"
        >
        </a-input>
        <a-select
          v-else
          v-model:value="formData.gen"
          placeholder="请选择应往届"
          :disabled="!store.editFlag"
        >
          <a-select-option value="应届">应届</a-select-option>
          <a-select-option value="往届">往届</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 教育背景 -->
      <a-form-item label="教育背景">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.bg"
          placeholder="请选择教育背景"
          :disabled="!store.editFlag"
        >
        </a-input>
        <a-select
          v-else
          v-model:value="formData.bg"
          placeholder="请选择教育背景"
          :disabled="!store.editFlag"
        >
          <a-select-option value="高中及以下">高中及以下</a-select-option>
          <a-select-option value="大专">大专</a-select-option>
          <a-select-option value="本科">本科</a-select-option>
          <a-select-option value="硕士及以上">硕士及以上</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 需求列表 -->
      <a-form-item label="需求列表">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.requirement"
          placeholder="请输入需求列表，可换行输入多项"
          :disabled="!store.editFlag"
        />
        <a-textarea
          v-else
          v-model:value="formData.requirement"
          placeholder="请输入需求列表，可换行输入多项"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 描述 -->
      <a-form-item label="描述">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.description"
          placeholder="请输入职位描述"
          :disabled="!store.editFlag"
        />
        <a-textarea
          v-else
          v-model:value="formData.description"
          placeholder="请输入职位描述"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 开放时间 -->
      <a-form-item label="开放时间">
        <a-range-picker
          v-model:value="formData.duration"
          placeholder="请选择开放时间范围"
          :disabled="!store.editFlag"
        />
      </a-form-item>
      <!-- 职位状态 -->
      <a-form-item label="职位状态" v-if="!store.addFlag && store.editFlag">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.status"
          placeholder="请选择应往届"
          :disabled="!store.editFlag"
        >
        </a-input>
        <a-select
          v-else
          v-model:value="formData.status"
          placeholder="请选择职位状态"
          :disabled="!store.editFlag"
          :options="store.statusEnums"
        >
        </a-select>
      </a-form-item>
      <!-- 职位标签 -->
      <a-form-item label="职位标签">
        <a-input
          v-if="!store.editFlag"
          v-model:value="formData.tags"
          placeholder="请选择职位标签"
          :disabled="!store.editFlag"
        >
        </a-input>
        <a-select
          v-else
          v-model:value="formData.tags"
          mode="multiple"
          placeholder="请选择职位标签"
          :disabled="!store.editFlag"
        >
          <a-select-option v-for="tag in availableTags" :key="tag" :value="tag">{{
            tag
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- 操作按钮 -->
    </a-form>
    <div v-if="store.editFlag" class="button-group">
      <a-button type="primary" class="edit-button" @click="addInfo">提交</a-button>
      <a-button class="reset-button" @click="reset">重置</a-button>
    </div>
  </a-drawer>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import server from '@/api/index'
import { usePositionStore } from '@/stores/positionStore'
import { useUserStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

const store = usePositionStore()
const userStore = useUserStore()
// 表单数据
const formData = ref({
  positionId: '',
  title: '',
  salary: '',
  location: '',
  gen: '',
  bg: '',
  requirement: null,
  description: '',
  duration: null,
  status: '',
  tags: [],
})

// 可供选择的职位标签
const availableTags = ['Java', 'Python', '前端开发', '后端开发', '数据分析', '高并发', '分布式']

const handleClose = () => {
  store.openDrawer = false
  store.editFlag = false
  store.editData = {}
  store.addFlag = false
}
const addInfo = () => {
  if (store.addFlag && store.editFlag) {
    addPosition()
  } else if (!store.addFlag && store.editFlag) {
    editPosition()
  }
}

const reset = () => {
  formData.value = { ...store.editData }
  if (store.editData.duration) {
    formData.value.duration = [
      dayjs(store.editData.duration.split('至')[0]).format('YYYY-MM-DD'),
      dayjs(store.editData.duration.split('至')[1]).format('YYYY-MM-DD'),
    ]
  }
}
const startDate = ref('')
const endDate = ref('')
const addPosition = async () => {
  if (formData.value.duration) {
    const formattedDuration = [
      formData.value.duration[0].format('YYYY/MM/DD HH:mm:ss'),
      formData.value.duration[1].format('YYYY/MM/DD HH:mm:ss'),
    ]
    let temp = formData.value.requirement.split('\n')

    let params = {
      bg: formData.value.bg,
      description: formData.value.description,
      endDate: formattedDuration[1],
      gen: formData.value.gen,
      location: formData.value.location,
      requirement: temp,
      salary: formData.value.salary,
      startDate: formattedDuration[0],
      tags: formData.value.tags,
      title: formData.value.title,
      userId: userStore.userAccount,
    }
    try {
      const res = await server.addPosition({
        ...params,
      })
      if (res.data.code === 0) {
        message.success(res.data.message)
        store.openDrawer = false
        if (store.positionFlag) {
          store.getMyPositionList(userStore.userAccount)
        } else {
          store.getAllPositionList()
        }
      } else {
        message.error(res.data.message)
      }
    } catch (e) {
      message.error(e)``
    }
  }
}
const editPosition = async () => {
  if (formData.value.duration) {
    const formattedDuration = [
      formData.value.duration[0].format('YYYY/MM/DD HH:mm:ss'),
      formData.value.duration[1].format('YYYY/MM/DD HH:mm:ss'),
    ]
    let params = {
      id: store.editData.id,
      bg: formData.value.bg,
      description: formData.value.description,
      endDate: formattedDuration[1],
      gen: formData.value.gen,
      location: formData.value.location,
      requirement: formData.value.requirement,
      salary: formData.value.salary,
      startDate: formattedDuration[0],
      tags: formData.value.tags,
      title: formData.value.title,
      userId: userStore.userAccount,
    }
    try {
      const res = await server.editPosition({
        ...params,
      })
      if (res.data.code === 0) {
        message.success(res.data.message)
        store.openDrawer = false
        if (store.positionFlag) {
          store.getMyPositionList(userStore.userAccount)
        } else {
          store.getAllPositionList()
        }
      } else {
        message.error(res.data.message)
      }
    } catch (e) {
      message.error(e)``
    }
  }
}
watch(
  () => store.openDrawer,
  val => {
    if (val) {
      formData.value = { ...store.editData }
      if (store.editData.duration) {
        formData.value.duration = [dayjs(store.editData.startDate), dayjs(store.editData.endDate)]
      }
    }
  },
)
</script>

<style lang="scss" scoped>
.icon {
  font-size: 14px;
  cursor: pointer;
}

.button-group {
  display: flex;
  justify-content: space-between;
  width: 93%;
  margin-top: 20px;
  margin-left: 23px;

  .edit-button {
    width: 200px;
  }

  .reset-button {
    width: 200px;
  }
}

:deep(.ant-input-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-input > input[disabled]) {
  color: #000;
}
</style>
